<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="所属地区：">
                  <el-input v-model="from.name" placeholder="请输入所属地区" clearable class="selWidth" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="语言识别码：">
                  <el-input v-model="from.code" placeholder="请输入语言识别码" clearable class="selWidth" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item>
                  <el-button class="mr10" size="small" icon="el-icon-search" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" icon="el-icon-circle-plus-outline"  type="primary" @click="add()">添加语言地区</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        highlight-current-row>
        <el-table-column prop="id" label="编号" min-width="100" />
        <el-table-column prop="name" label="所属地区" min-width="150" />
        <el-table-column prop="code" label="语言识别码" min-width="150" />
        <el-table-column label="操作" min-width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog :title="ruleForm.id?'修改语言地区':'新增语言地区'" :visible.sync="dialogVisible" width="40%"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="120px">
        <el-form-item label="所属地区：" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入所属地区"></el-input>
        </el-form-item>
        <el-form-item label="语言识别码：" prop="code">
          <el-input v-model="ruleForm.code" placeholder="请输入语言识别码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    langcountryList,
    langcountrySave,
    langcountryInfo,
    langcountryUpdate,
    langcountryDelete
  } from '@/api/language'
  export default {
    name: 'country',
    data() {
      return {
        labelPosition: 'right',
        from: {
          name: '',
          code: '',
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        dialogVisible: false,
        ruleForm: {
          id: '',
          name: '',
          code:'',
        },
        rules: {
          name: [{
            required: true,
            message: '请输入所属地区',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入语言识别码',
            trigger: 'blur'
          }],
        }
      };
    },
    mounted() {
      this.getlist();
    },
    methods: {
      search(){
        console.log(this.from)
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset(){
        this.from = {
          name: '',
          code: '',
          page: 1,
          limit: 15,
        }
        this.getlist()
      },
      add() {
        this.ruleForm = {
          id: '',
          name: '',
          code: ''
        }
        this.dialogVisible = true
      },
      handleEdit(row) {
        console.log('编辑', row)
        langcountryInfo(row.id).then(res => {
          console.log('详情', res)
          this.ruleForm = {
            id: res.id,
            name: res.name,
            code: res.code
          }
          this.dialogVisible = true
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            langcountryDelete([row.id]).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      close() {
        this.ruleForm = {
          id: '',
          name: '',
          code: ''
        }
        this.dialogVisible = false
      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              console.log('编辑', this.ruleForm)
              langcountryUpdate(this.ruleForm).then(res => {
                console.log(res)
                this.close()
                this.$message.success('编辑成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            } else {
              console.log('新增', this.ruleForm)
              let data = {
                name: this.ruleForm.name,
                code: this.ruleForm.code,
              }
              langcountrySave(data).then(res => {
                console.log(res)
                this.close()
                this.$message.success('新增成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            }
          } else {
            this.$message.error('请填写完整信息')
          }
        });
      },
      getlist() {
        this.loading = true
        langcountryList(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    },
  };
</script>
<style scoped lang="scss">
  .btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
  }
</style>
